﻿<template>
  <div>
    <el-collapse accordion class = 'myCollapse' value = 'inherentEvents'>
      <el-collapse-item title = '页面固有事件' name = 'inherentEvents'>
        <el-table :data = 'currentPage.inherentEvents' style = "width:100%" border stripe max-height = 340>
          <el-table-column  align = "center" prop = 'isActive' label = '是否启用' width = 70 :render-header = 'handelHelp' label-class-name = "如果该页面不需要该事件，请取消启用">
            <template slot-scope = "scope">
              <el-switch v-model = "scope.row.isActive" @change = "inherentEventActive"></el-switch>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'eventsType' label = '事件或行为类别'  min-width = "140px" show-overflow-tooltip
          :render-header = 'handelHelp' label-class-name = "当需要指定弹窗页面时，请在列表右侧选择合适的页面">
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.eventsType" disabled>
                <el-option-group label = '表格初始化/行事件'>
                  <el-option value = 'initTable' label = '初始化表格事件'></el-option>
                  <el-option value = 'deleteTable' label = '删除表格行事件(删除后不可恢复)'></el-option>
                  <el-option value = 'removeTable' label = '移除表格行事件(删除后可恢复)'></el-option>
                  <el-option value = 'recoverTable' label = '恢复表格行事件(执行移除表格行事件的数据)'></el-option>
                  <el-option value = 'activeTable' label = '启用事件'></el-option>
                  <el-option value = 'deactiveTable' label = '停用事件'></el-option>
                </el-option-group>
                <el-option-group label = '表格行行为(需指定弹窗页面)'>
                  <el-option value = 'editTable' label = '编辑表格行行为'></el-option>
                  <el-option value = 'showDetail' label = '查看表格行行为(查看详细)'></el-option>
                </el-option-group>
                <el-option-group label = '按钮事件'>
                  <el-option value = 'searchInfo' label = '查询事件'></el-option>
                  <el-option value = 'exportReport' label = '导出事件'></el-option>
                  <el-option value = 'importReport' label = '导入事件'></el-option>
                  <el-option value = 'extend_save' label = '保存事件'></el-option>
                  <el-option value = 'extend_submit' label = '提交事件'></el-option>
                  <el-option value = 'extend_pass' label = '通过事件'></el-option>
                  <el-option value = 'extend_reject' label = '驳回事件'></el-option>
                  <el-option value = 'extend_finish' label = '完成事件'></el-option>
                  <el-option value = 'extend_stop' label = '终止事件'></el-option>
                  <el-option value = 'submitDialogForm_add' label = '提交弹窗表单(新增)'></el-option>
                  <el-option value = 'submitDialogForm_edit' label = '提交弹窗表单(编辑)'></el-option>
                  <el-option value = 'submitForm_add' label = '提交表单(新增)'></el-option>
                  <el-option value = 'submitForm_edit' label = '提交表单(编辑)'></el-option>
                </el-option-group>
                <el-option-group label = '按钮行为'>
                  <el-option value = 'addDialogForm' label = '打开弹窗行为(需指定弹窗页面)'></el-option>
                  <el-option value = 'resetDialogForm' label = '关闭弹窗行为'></el-option>
                </el-option-group>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedTag' label = '关联元素' show-overflow-tooltip min-width = "120px">
            <template slot-scope="scope">
              <el-select v-model = "scope.row.relatedTag" placeholder = '请选择' :disabled = "!scope.row.eventsType">
                <el-option :label = "modelItem.name + '(' + modelItem.model + ')'" :value = 'modelItem.model' v-for = 'modelItem in allSingleModel' :key = 'modelItem.model'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'dialogUid' label = '弹窗页面' show-overflow-tooltip min-width = "120px"
          :render-header = 'handelHelp' label-class-name = "只有编辑表格行行为、查看表格行行为、打开弹窗行为三种需要指定弹窗页面">
            <template slot-scope = "scope">
              <el-select v-model = 'scope.row.dialogUid' clearable filterable placeholder = '请选择弹窗页面'
              v-if = "scope.row.eventsType === 'editTable' || scope.row.eventsType === 'showDetail' || scope.row.eventsType === 'addDialogForm'">
                <el-option :label = "pageUid.category ? (pageUid.name + '(' + pageUid.category + ')') : pageUid.name" :value = 'pageUid.uid' v-for = "pageUid in allPageUid" :key = 'pageUid.uid'></el-option>
              </el-select>
              <span v-else></span>
            </template>
          </el-table-column>
          <!-- 表达式部分 -->
          <el-table-column align = "center" label = 'express' show-overflow-tooltip>
            <template slot-scope = "scope">
              <span v-if = "scope.row.eventsType.indexOf('_edit') !== -1 || scope.row.eventsType.indexOf('exportReport') !== -1 || scope.row.eventsType.indexOf('_add') !== -1 ||scope.row.eventsType.indexOf('Table') !== -1 || scope.row.eventsType.indexOf('extend_') !== -1" class = 'clickStatus' @click = "settingFixedExpress(scope.row, scope.$index)">点击设置</span>
              <span v-else></span>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title = '页面自定义事件' name = 'selfdefineEvents'>
        <div class = "addColumn">
          <p @click = "handleAddOption()"> <i class="iconfont icon-add"></i>添加页面事件或行为</p>
        </div>
        <el-table :data = 'currentPage.events' style = "width:100%" empty-text = "暂无数据，请添加" border stripe max-height = 340>
          <el-table-column align = "center" prop = 'eventsType' label = '事件或行为类别' min-width = "180px" :render-header = 'handelHelp'
          label-class-name = "初始化页面事件无需关联元素，类型为行为时无需绑事件">
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.eventsType" placeholder = '请选择' clearable filterable @change = "(val) => {eventTypeChange(val, scope.$index)}">
                <el-option-group v-for = 'group in eventSelectOption' :key = 'group.groupKey' :label = 'group.groupLabel'>
                  <el-option v-for = "(item, index) in group.options" :key = 'index' :value = 'item.value' :label = 'item.label'></el-option>
                </el-option-group>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'eventsNo' label = '事件名称' show-overflow-tooltip min-width = "120px">
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.eventsNo" placeholder = '请选择' clearable filterable
              :disabled = "!scope.row.eventsType || scope.row.eventsType.indexOf('reset') !== -1 || scope.row.eventsType.indexOf('showDetail') !== -1 || scope.row.eventsType.indexOf('selfDefineDialogTable') !== -1 || scope.row.eventsType.indexOf('selfDefinePage') !== -1 || scope.row.eventsType === 'editTable' || scope.row.eventsType === 'addDialogForm'">
                <el-option v-for = '(eventItem, eventIndex) in allEvents' :key = 'eventIndex' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedTag' label = '关联元素' show-overflow-tooltip min-width = "120px">
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.relatedTag" placeholder = '请选择' :disabled = "!scope.row.eventsType || scope.row.eventsType === 'initPage'">
                <el-option :label = "modelItem.name + '(' + modelItem.model + ')'" :value = 'modelItem.model' v-for = 'modelItem in allSingleModel' :key = 'modelItem.model'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'actionIndex' label = '执行顺序' min-width = "120px">
            <template slot-scope = "scope">
              <el-input-number size = "mini" v-model = "scope.row.actionIndex" :min = "-10" :max = "10" :step = "1" step-strictly
              @change = "(val, oldVal) => {actionIndexChange(val, oldVal, scope.$index)}"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'actionIndex' label = '设置词典表' min-width = "80px">
            <template slot-scope="scope">
              <span @click = 'setEventDic(scope.row, scope.$index)' class = 'clickStatus'>...</span>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'dialogUid' label = '弹窗页面' show-overflow-tooltip min-width="120px">
            <template slot-scope = "scope">
              <el-select v-model = 'scope.row.dialogUid' clearable filterable
              :disabled = "!scope.row.eventsType || scope.row.eventsType.indexOf('_openPage') !== -1 || scope.row.eventsType.indexOf('selfDefine_btnEvent') !== -1 || scope.row.eventsType.indexOf('selfDefine_exportEvent') !== -1 || scope.row.eventsType.indexOf('beforeQueryTableData') !== -1 || scope.row.eventsType.indexOf('extend_') !== -1 || scope.row.eventsType.indexOf('importReport') !== -1 || scope.row.eventsType.indexOf('exportReport') !== -1 || scope.row.eventsType.indexOf('selfDefineTable') !== -1 || scope.row.eventsType.indexOf('activeTable') !== -1 || scope.row.eventsType.indexOf('delete') !== -1 || scope.row.eventsType.indexOf('init') !== -1 || scope.row.eventsType.indexOf('submit') !== -1 || scope.row.eventsType.indexOf('reset') !== -1 || scope.row.eventsType.indexOf('search') !== -1">
                <el-option :label = "pageUid.category ? (pageUid.name + '(' + pageUid.category + ')') : pageUid.name" :value = 'pageUid.uid' v-for = "pageUid in allPageUid" :key = 'pageUid.uid'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'dialogUid' label = '按钮名称' label-class-name = "自定义表格行行为时，可设置行按钮名称">
            <template slot-scope = "scope">
              <el-input v-model = 'scope.row.selfName' clearable placeholder = "请输入" :disabled = "scope.row.eventsType !== 'selfDefineTable' && scope.row.eventsType !== 'selfDefinePageTable_openPage' && scope.row.eventsType !== 'selfDefinePageTable' && scope.row.eventsType !== 'selfDefineDialogTable' && scope.row.eventsType !== 'beforeQueryTableData' && scope.row.eventsType !== 'selfDefine_exportEvent'"></el-input>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'dialogUid' label = 'icon名称' label-class-name = "自定义表格行行为时，可设置行按钮前的icon名称">
            <template slot-scope = "scope">
              <el-input v-model = 'scope.row.selfIconName' clearable placeholder = "请输入" :disabled = "scope.row.eventsType !== 'selfDefineTable' && scope.row.eventsType !== 'selfDefinePageTable_openPage' && scope.row.eventsType !== 'selfDefinePageTable' && scope.row.eventsType !== 'selfDefineDialogTable' && scope.row.eventsType !== 'beforeQueryTableData' && scope.row.eventsType !== 'selfDefine_exportEvent'"></el-input>
            </template>
          </el-table-column>
          <!-- 自定的事件，只需要在自定义打开弹窗和自定义执行事件时添加表达式 -->
          <el-table-column align = "center" label = 'express' show-overflow-tooltip>
            <template slot-scope = "scope">
              <span v-if = "scope.row.eventsType === 'selfDefinePage_openPage' || scope.row.eventsType === 'selfDefinePageTable_openPage' || scope.row.eventsType === 'selfDefinePageTable' || scope.row.eventsType === 'selfDefineDialogTable' || scope.row.eventsType === 'selfDefineTable' || scope.row.eventsType === 'selfDefineTable_export'" class = 'clickStatus' @click = "settingFixedExpress(scope.row, scope.$index)">点击设置</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "30">
            <template slot-scope = "scope">
              <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                <i class="iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
    <Event-Dic :row = 'clickRow' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
    <Fixed-Filter-Express :fixedFilterRow = 'fixedFilterRow' :fixedFilterDialog = 'fixedFilterDialog'
    @settingFixedFilterSuccess = 'settingFixedFilterSuccess' @settingFixedFilterFailed = 'fixedFilterDialog = false'></Fixed-Filter-Express>
  </div>
</template>

<script>
import EventDic from '@/components/Events/EventsDic.vue'
// 初始化表格固有过滤条件的弹窗
import FixedFilterExpress from './Fixed_filter_express.vue'
export default {
  props: ['currentPage', 'allSingleModel', 'propsInfo'],
  data () {
    return {
      allEvents: [],
      allPageUid: [],
      // 打开设置页面词典表的弹窗
      eventDicDialog: false,
      clickRow: null,
      clickIndex: null,
      // 可设置页面事件的类型
      eventSelectOption: [
        {
          groupKey: 'initPage',
          groupLabel: '页面初始化(无需关联元素)',
          options: [
            {
              value: 'initPage',
              label: '初始化页面事件'
            }
          ]
        },
        {
          groupKey: 'tableEvents',
          groupLabel: '表格行事件(需绑定事件)',
          options: [
            {
              value: 'selfDefineTable_export',
              label: '表格行导出事件(直接执行事件)'
            },
            {
              value: 'selfDefineTable',
              label: '自定义表格行事件(直接执行事件)'
            }
          ]
        },
        {
          groupKey: 'tableActions',
          groupLabel: '表格行行为(无需绑定事件)',
          options: [
            {
              value: 'selfDefineDialogTable',
              label: '自定义表格行行为(打开弹窗)'
            },
            {
              value: 'selfDefinePageTable',
              label: '自定义表格行行为(打开系统内页面)'
            },
            {
              value: 'selfDefinePageTable_openPage',
              label: '自定义表格行行为(打开系统外页面)'
            }
          ]
        },
        {
          groupKey: 'btnEvents',
          groupLabel: '按钮事件(需绑定事件)',
          options: [
            {
              value: 'beforeQueryTableData',
              label: '查询表格事件前执行'
            },
            {
              value: 'selfDefine_exportEvent',
              label: '自定义导出报表事件'
            },
            {
              value: 'selfDefine_btnEvent',
              label: '自定义按钮事件'
            },
            {
              value: 'selfDefine_btnEvent_close',
              label: '自定义按钮事件(执行后关闭弹窗)'
            }
          ]
        },
        {
          groupKey: 'btnActions',
          groupLabel: '按钮行为(无需绑定事件)',
          options: [
            {
              value: 'addDialogForm',
              label: '打开弹窗页面'
            },
            {
              value: 'selfDefinePage',
              label: '打开系统内新的页面'
            },
            {
              value: 'selfDefinePage_openPage',
              label: '打开系统外新的页面'
            }
          ]
        }
      ],
      // 初始化表格固有过滤条件的弹窗
      fixedFilterDialog: false,
      fixedFilterRow: null,
      fixedFilterIndex: null
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      this.getAllEvents()
      this.clickRow = null
      this.clickIndex = null
      this.eventSelectOption = [
        {
          groupKey: 'initPage',
          groupLabel: '页面初始化(无需关联元素)',
          options: [
            {
              value: 'initPage',
              label: '初始化页面事件'
            }
          ]
        },
        {
          groupKey: 'tableEvents',
          groupLabel: '表格行事件(需绑定事件)',
          options: [
            {
              value: 'selfDefineTable_export',
              label: '表格行导出事件(直接执行事件)'
            },
            {
              value: 'selfDefineTable',
              label: '自定义表格行事件(直接执行事件)'
            }
          ]
        },
        {
          groupKey: 'tableActions',
          groupLabel: '表格行行为(无需绑定事件)',
          options: [
            {
              value: 'selfDefineDialogTable',
              label: '自定义表格行行为(打开弹窗)'
            },
            {
              value: 'selfDefinePageTable',
              label: '自定义表格行行为(打开系统内页面)'
            },
            {
              value: 'selfDefinePageTable_openPage',
              label: '自定义表格行行为(打开系统外页面)'
            }
          ]
        },
        {
          groupKey: 'btnEvents',
          groupLabel: '按钮事件(需绑定事件)',
          options: [
            {
              value: 'beforeQueryTableData',
              label: '查询表格事件前执行'
            },
            {
              value: 'selfDefine_exportEvent',
              label: '自定义导出报表事件'
            },
            {
              value: 'selfDefine_btnEvent',
              label: '自定义按钮事件'
            },
            {
              value: 'selfDefine_btnEvent_close',
              label: '自定义按钮事件(执行后关闭弹窗)'
            }
          ]
        },
        {
          groupKey: 'btnActions',
          groupLabel: '按钮行为(无需绑定事件)',
          options: [
            {
              value: 'addDialogForm',
              label: '打开弹窗页面'
            },
            {
              value: 'selfDefinePage',
              label: '打开系统内新的页面'
            },
            {
              value: 'selfDefinePage_openPage',
              label: '打开系统外新的页面'
            }
          ]
        }
      ]
      if (this.currentPage.inherentEvents.length) {
        this.inherentEventActive()
      }
      if (this.propsInfo.settingFrom === 'workflowSetting') {
        this.getAllWorkflowPage()
      } else if (this.propsInfo.settingFrom === 'dynamicSetting') {
        this.getAllDynamicPage()
      }
    },
    // 事件或者行为的类型变化时
    eventTypeChange (val, index) {
      if (val) {
        if (val === 'initPage') {
          this.currentPage.events[index].dialogUid = ''
          this.currentPage.events[index].relatedTag = ''
        } else if (val === 'addDialogForm' || val === 'selfDefineTable' || val === 'selfDefinePageTable_openPage' || val === 'selfDefinePage_openPage' || val === 'selfDefineTable_export' || val === 'beforeQueryTableData' || val === 'selfDefine_exportEvent' || val === 'selfDefine_btnEvent' || val === 'selfDefine_btnEvent_close') {
          this.currentPage.events[index].dialogUid = ''
        } else if (val === 'selfDefineDialogTable' || val === 'selfDefinePageTable_openPage' || val === 'selfDefinePage_openPage' || val === 'selfDefinePageTable' || val === 'selfDefinePage') {
          this.currentPage.events[index].eventsNo = ''
        } else {
          // 当添加的是固有事件时，需要将固有事件中已经配置好的内容带代入
          this.currentPage.inherentEvents.forEach(item => {
            if (item.eventsType === val) {
              this.$set(this.currentPage.events[index], 'relatedTag', item.relatedTag)
              this.$set(this.currentPage.events[index], 'dialogUid', item.dialogUid)
            }
          })
        }
      } else {
        this.$set(this.currentPage.events, index, {
          isActive: true,
          eventsNo: '',
          eventsType: '',
          relatedTag: '',
          dialogUid: '',
          actionIndex: 1,
          inputDic: [],
          outputDic: [],
          selfName: '',
          selfIconName: 'icon-bianji',
          // 分页方式 back（后端），front前端
          pageType: 'back',
          fixed_filter_express: '',
          fixed_orderby_express: '',
          other_condition_express: '',
          fixed_data_express: '',
          ref_express: '',
          row_express: '',
          linkUrlExpress: ''
        })
      }
    },
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取所有动态表单的页面
    getAllDynamicPage () {
      this.allPageUid = []
      this.$get('/d_form', {
        type: 'meta'
      }).then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.propsInfo.uid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取所有流程表单的页面
    getAllWorkflowPage () {
      this.allPageUid = []
      this.$basicWFGet('/d_form').then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          if (dataResult.data.length) {
            dataResult.data.forEach(item => {
              if (item.uid !== this.propsInfo.uid) {
                this.allPageUid.push(item)
              }
            })
          }
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 删除选项时
    handleOptionsRemove (index) {
      this.currentPage.events.splice(index, 1)
    },
    // 新增选项时
    handleAddOption () {
      let obj = {
        isActive: true,
        eventsNo: '',
        eventsType: '',
        relatedTag: '',
        dialogUid: '',
        actionIndex: 1,
        inputDic: [],
        outputDic: [],
        selfName: '',
        selfIconName: 'icon-bianji',
        pageType: 'back',
        fixed_filter_express: '',
        fixed_orderby_express: '',
        other_condition_express: '',
        fixed_data_express: '',
        ref_express: '',
        // 表格行事件的显示和隐藏条件
        row_express: '',
        // 打开新页面的地址
        linkUrlExpress: ''
      }
      this.$set(this.currentPage.events, this.currentPage.events.length, obj)
    },
    // 设置初始化事件的固有查询事件
    settingFixedExpress (row, index) {
      this.fixedFilterDialog = true
      this.fixedFilterRow = JSON.parse(JSON.stringify(row))
      this.fixedFilterIndex = index
    },
    // 设置初始化事件的固有查询事件成功时
    settingFixedFilterSuccess (fromSetting) {
      let eventsArrayType = 'inherentEvents'
      if (this.fixedFilterRow.eventsType.indexOf('selfDefine') !== -1) {
        eventsArrayType = 'events'
      }
      this.fixedFilterDialog = false
      this.currentPage[eventsArrayType][this.fixedFilterIndex].fixed_filter_express = fromSetting.filterExpress
      this.currentPage[eventsArrayType][this.fixedFilterIndex].fixed_orderby_express = fromSetting.orderbyExpress
      this.currentPage[eventsArrayType][this.fixedFilterIndex].other_condition_express = fromSetting.conditionExpress
      this.currentPage[eventsArrayType][this.fixedFilterIndex].fixed_data_express = fromSetting.dataExpress
      this.$set(this.currentPage[eventsArrayType][this.fixedFilterIndex], 'ref_express', fromSetting.refExpress)
      this.$set(this.currentPage[eventsArrayType][this.fixedFilterIndex], 'row_express', fromSetting.rowExpress)
      this.$set(this.currentPage[eventsArrayType][this.fixedFilterIndex], 'linkUrlExpress', fromSetting.linkUrlExpress)
    },
    // 设置词典表时
    setEventDic (row, index) {
      if (row.eventsNo) {
        this.eventDicDialog = true
        this.clickRow = JSON.parse(JSON.stringify(row))
        this.clickIndex = index
      } else {
        this.$message({
          message: '请添加需要的事件',
          type: 'warning'
        })
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      this.eventDicDialog = false
      this.currentPage.events[this.clickIndex].inputDic = fromSetting.inputDic
      this.currentPage.events[this.clickIndex].outputDic = fromSetting.outputDic
    },
    // 事件执行的顺序改变时
    actionIndexChange (val, oldVal, index) {
      if (val === 0) {
        if (val > oldVal) {
          this.currentPage.events[index].actionIndex = val + 1
        } else {
          this.currentPage.events[index].actionIndex = val - 1
        }
      }
    },
    // 固有事件启用或者停用时
    inherentEventActive () {
      for (let i = 0; i < this.currentPage.inherentEvents.length; i++) {
        let item = this.currentPage.inherentEvents[i]
        if (item.eventsType === 'deleteTable' || item.eventsType === 'removeTable' || item.eventsType === 'recoverTable' || item.eventsType === 'activeTable' || item.eventsType === 'deactiveTable') {
          this.changeEventSelectOption(item, 1)
        } else if (item.eventsType.indexOf('extend_') !== -1 || item.eventsType === 'submitDialogForm_edit' || item.eventsType === 'submitForm_edit' || item.eventsType === 'submitDialogForm_add' || item.eventsType === 'submitForm_add' || item.eventsType === 'searchInfo' || item.eventsType === 'importReport' || item.eventsType === 'exportReport') {
          this.changeEventSelectOption(item, 3)
        }
      }
    },
    // 判断该事件类型是否已经添加到eventSelectOption中
    changeEventSelectOption (currentItem, currentIndex) {
      if (currentItem.isActive) {
        // 启用时，需要先判断该事件是否已经添加
        let hadPushed = false
        for (let i = 0; i < this.eventSelectOption[currentIndex].options.length; i++) {
          if (this.eventSelectOption[currentIndex].options[i].value === currentItem.eventsType) {
            hadPushed = true
            break
          }
        }
        if (!hadPushed) {
          let obj = {
            value: currentItem.eventsType,
            label: this.getEventsTypeLabel(currentItem.eventsType)
          }
          this.eventSelectOption[currentIndex].options.unshift(obj)
        }
      } else {
        this.eventSelectOption[currentIndex].options.forEach((item, index) => {
          if (item.value === currentItem.eventsType) {
            this.eventSelectOption[currentIndex].options.splice(index, 1)
          }
        })
        // 同时，自定义表格中添加了该事件时，需要把该事件移除
        this.deleteSelfDefineEvents(currentItem.eventsType)
      }
    },
    // 删除自定义事项中选定的事件
    deleteSelfDefineEvents (type) {
      for (let i = 0; i < this.currentPage.events.length; i++) {
        if (this.currentPage.events[i].eventsType === type) {
          this.currentPage.events.splice(i, 1)
          // 由于删除了一个事件，所以事件的长度会改变，需要重新进行循环
          this.deleteSelfDefineEvents(type)
          break
        }
      }
    },
    getEventsTypeLabel (eventType) {
      let label = ''
      switch (eventType) {
        case 'deleteTable': {
          label = '删除表格行事件(删除后不可恢复)'
          break
        }
        case 'removeTable': {
          label = '移除表格行事件(删除后可恢复)'
          break
        }
        case 'recoverTable': {
          label = '恢复表格行事件(恢复移除表格行事件的数据)'
          break
        }
        case 'activeTable': {
          label = '启用事件'
          break
        }
        case 'deactiveTable': {
          label = '停用事件'
          break
        }
        case 'extend_save': {
          label = '保存事件'
          break
        }
        case 'extend_submit': {
          label = '提交事件'
          break
        }
        case 'extend_pass': {
          label = '通过事件'
          break
        }
        case 'extend_reject': {
          label = '驳回事件'
          break
        }
        case 'extend_finish': {
          label = '完成事件'
          break
        }
        case 'extend_stop': {
          label = '终止事件'
          break
        }
        case 'submitDialogForm_add': {
          label = '提交弹窗表单(新增)'
          break
        }
        case 'submitDialogForm_edit': {
          label = '提交弹窗表单(编辑)'
          break
        }
        case 'submitForm_add': {
          label = '提交表单(新增)'
          break
        }
        case 'submitForm_edit': {
          label = '提交表单(编辑)'
          break
        }
        case 'searchInfo': {
          label = '查询事件'
          break
        }
        case 'importReport': {
          label = '导入事件'
          break
        }
        case 'exportReport': {
          label = '导出事件'
          break
        }
      }
      return label
    }
  },
  watch: {
    'propsInfo.settingVisible': {
      handler (val) {
        if (val) {
          this.initPage()
        }
      },
      deep: true
    }
  },
  components: {
    EventDic, FixedFilterExpress
  }
}
</script>
